<template>

  <div id='reportlist'>
    <drawer :show.sync="drawerVisibility" :show-mode="showModeValue" :placement="showPlacementValue" :drawer-style="{'background-color':'#35495e', width: '200px'}" style="height:100vh">

      <div slot="drawer">
        1111
      </div>

      <view-box ref="viewBox" style="height:100%;">
        <div style="width:100%">
          <x-header style="position: absolute;top: 0;width: 100%;z-index:1" slot="header" :left-options="{backText: ''}" title="我的成绩">
            <a href="./#/racelist" style="font-size:24px" slot="right">
              <i class="fa fa-home fa-fw"></i>
            </a>
          </x-header>
        </div>

        <div>

          <ul>
            <li style="display: none">
              <panel :list="list" :type="type"></panel>
            </li>

            <card :header="{title:'我的成绩' }">
              <div slot="content" class="card-padding">
                <scroller style="top:0px" lock-x scrollbar-y height="-132" ref="scroller" use-pullup v-model="demo4Value" @on-pullup-loading="load4">
                  <div class="listwarpper">
                    <group no-title gutter=“100”>
                      <cell-box v-if='!!item.registion.data' v-for="(item,index) in list" :key="index" @click.native="goLink('report',item.raceinfo.id,item.idnum)" is-link>
                        <h4>{{item.raceinfo.name}}</h4>
                        <div>
                          <span class='vux-label-desc'>项目:{{item.eventinfo.name}}</span>
                          </br>
                          <span class='vux-label-desc'>参赛号:{{item.bib}}</span>
                          <span class='vux-label-desc' v-if='item.registion.data.state=="FINISH"'>状态:完赛</span>
                          <span class='vux-label-desc' v-if='item.registion.data.state=="DNF"'>状态:未完赛</span>
                          <span class='vux-label-desc' v-if='item.registion.data.state=="DNS"'>状态:未出发</span>
                          <span class='vux-label-desc' v-if='item.registion.data.state=="DSQ"'>状态:取消成绩</span>
                        </div>
                      </cell-box>

                    </group>
                  </div>
                  <div v-if='!stop' slot="pullup" class="xs-plugin-pullup-container xs-plugin-pullup-up" style="position: absolute; width: 100%; height: 50px; bottom: -50px; text-align: center;">
                    <span v-show="demo4Value.pullupStatus === 'default'"></span>
                    <span class="pullup-arrow" v-show="demo4Value.pullupStatus === 'default' || demo4Value.pullupStatus === 'up' || demo4Value.pullupStatus === 'down'" :class="{'rotate': demo4Value.pullupStatus === 'down'}">↑</span>
                    <span v-show="demo4Value.pullupStatus === 'loading'">
                      <spinner type="ios-small"></spinner>
                    </span>
                  </div>
                  <div v-if='stop' class="nomore"></div>
                </scroller>
              </div>
              <div v-if='list.length<=0&&isShow' slot="content" class="card-padding" style="text-align: center;position: absolute;width: 100%;top: 100px;">
                暂没有成绩
              </div>
            </card>

          </ul>

          <!-- <circle-menu type="top" :number='3' mask='black' btn circle>
            <a slot="item_1" class="fa fa-twitter fa-lg"></a>
            <a slot="item_2" class="fa fa-weixin fa-lg"></a>
            <a slot="item_3" class="fa fa-weibo fa-lg"></a>
          </circle-menu> -->

        </div>

        <myFooter id="foot2" :page="pageConfig"></myFooter>
      </view-box>

    </drawer>

  </div>

</template>


<script type="text/ecmascript-6">
/* eslint-disable*/
const countTime = 60; //倒数计时60秒

import Myheader from "@/common/components/myheader.vue";
import { cookie } from "vux";
import myFooter from "@/common/components/myfooter.vue";

//import {host} from "@/api/config";
//let host = "http://jiangtao.v3.ihuipao.com/";

import {
  CellBox,
  Card,
  Panel,
  XHeader,
  Search,
  debounce,
  XInput,
  Group,
  XButton,
  Grid,
  GridItem,
  FormPreview,
  ViewBox,
  Cell,
  LoadMore,
  Actionsheet,
  Toast,
  Confirm,
  Scroller,
  Spinner,
  Flexbox,
  Drawer,
  FlexboxItem,
  TransferDomDirective as TransferDom
} from "vux";

import qs from "qs";
import { axios } from "@/api/axios.js";
import { indexedDB } from "@/api/indexedDB.js";
import CircleMenu from "vue-circle-menu";
import mixin from "@/common/js/mixin";
import { isIdNumber, setTitle } from "@/common/js/main.js";

export default {
  mixins: [mixin],
  props: ["page", "host"],
  data() {
    return {
      showContent001: false,
      showMore: true,
      type: "5",
      pageIndex: 0,
      config: {
        perpage: 8, //分页数量
        page: 1, //当前页数
        hasmorepage: false //是否还有分页
      },
      searchConfig: {},
      showModeValue: "overlay",
      showPlacementValue: "right",
      stop: false,
      drawerVisibility: false,
      demo4Value: {
        pullupStatus: "default"
      },
      pageConfig: window.pageConfig,
      value: "",
      list: [],
      isShow: false
    };
  },
  computed: {},
  beforeCreate() {
    if (
      //如果没有_sid就去登录
      typeof cookie.get("_sid") == "undefined" ||
      window.localStorage.getItem("isLogin") == "false"
    ) {
      this.$router.push({ path: "login" });
    }
    setTitle("我的成绩");
  },
  created() {
    this.getList();
  },
  mounted() {},
  methods: {
    goLink(routerName, raceId, searchId) {
      let _this = this;
      window.localStorage.setItem("shearchId", searchId);

      _this.$router.push({ path: routerName, query: { race_id: raceId } });
    },
    load4() {
      this.demo4Value.pullupStatus = "up";

      this.config.perpage += 8;

      this.getList(this.searchConfig);

      // this.$nextTick(() => {
      //   this.$refs.scroller.reset();
      // });
    },
    errorImg(index) {
      console.log(index);
      //.src="http://placeholder.qiniudn.com/70x70/3cc51f/ffffff"
    },
    getList(config) {
      let _this = this;

      if (!!this.stop) {
        return;
      }
      config = {
        page: 10
      };

      axios.post(`${host}user/auth/achievement`, qs.stringify(config)).then(
        response => {
          if (response.data.code == "200") {
            //console.log(response.data.data.data)
            if (response.data.data.length == 0) {
              this.list = response.data.data;
            } else {
              this.list = response.data.data.data;
            }

            console.log(this.list);

            this.isShow = true;

            if (response.data.data.length == 0) {
              this.stop = true;
            } else if (this.list.length >= response.data.data.total) {
              this.stop = true;
            } else {
              this.stop = false;
            }

            _this.demo4Value.pullupStatus = "default";

            //console.log(response.data.data);
          }
        },
        error => {
          console.log(error);
        }
      );
    }
  },
  directives: {
    TransferDom
  },
  components: {
    CellBox,
    Card,
    Panel,
    XHeader,
    Search,
    myFooter,
    debounce,
    XInput,
    Group,
    XButton,
    Grid,
    GridItem,
    FormPreview,
    ViewBox,
    Cell,
    LoadMore,
    Actionsheet,
    Toast,
    Myheader,
    Confirm,
    Flexbox,
    Drawer,
    Scroller,
    Spinner,
    CircleMenu,
    FlexboxItem
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" rel="stylesheet/less">
body,
html {
  height: 100%;
  width: 100%;
  overflow-x: hidden;
}

#reportlist {
  .listwarpper {
    li {
      max-width: 40px;
      img {
        width: 100%;
      }
    }
  }
  .card-padding {
    .vux-cell-box {
      display: block;
    }
    ul {
      display: flex;
    }
    li + li {
      padding-left: 10px;
    }
  }
}

.vux-label-desc {
  font-size: 14px;
  color: #666;
}

#reportlist .weui-panel {
  padding-top: 33px;
}

#reportlist #foot2 .footerBanner {
  display: none;
}
</style>






